<template>
  <div class="wrap">
    <el-row>
      <!--工具条-->
      <el-col :span="24" class="header-wrap">
        <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" label-width="110px">
          <el-row :gutter="0">
            <el-col :span="6">
              <el-form-item label="真实姓名" prop="name">
                <el-input v-model="formInline.name" prefix-icon="el-icon-search"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="formInline.phone" prefix-icon="el-icon-search"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学校状态" prop="school">
                <el-select v-model="formInline.school" placeholder="学校状态">
                  <el-option label="未认证" value="0"></el-option>
                  <el-option label="已认证" value="1"></el-option>
                  <el-option label="认证失败" value="2"></el-option>
                  <el-option label="认证中" value="3"></el-option>
                  <el-option label="全部" value=""></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <el-button type="primary" @click="search('formInline')">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="6">
              <el-form-item label="身份证认证状态" prop="userCard" label-width="100px;">
                <el-select v-model="formInline.userCard" placeholder="身份证认证状态">
                  <el-option label="未认证" value="0"></el-option>
                  <el-option label="已认证" value="1"></el-option>
                  <el-option label="认证失败" value="2"></el-option>
                  <el-option label="认证中" value="3"></el-option>
                  <el-option label="已过期" value="4"></el-option>
                  <el-option label="全部" value=""></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="个人信息状态" prop="personInfo">
                <el-select v-model="formInline.personInfo" placeholder="个人信息状态">
                  <el-option label="未认证" value="0"></el-option>
                  <el-option label="已认证" value="1"></el-option>
                  <el-option label="认证失败" value="2"></el-option>
                  <el-option label="认证中" value="3"></el-option>
                  <el-option label="全部" value=""></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职业状态" prop="job">
                <el-select v-model="formInline.job" placeholder="学校/职业状态">
                  <el-option label="未认证" value="0"></el-option>
                  <el-option label="已认证" value="1"></el-option>
                  <el-option label="认证失败" value="2"></el-option>
                  <el-option label="认证中" value="3"></el-option>
                  <el-option label="全部" value=""></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item>
                <el-button type="danger" @click="reset('formInline')">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <!--表格列表-->
      <el-col :span="24">
        <el-table :data="certificationList" :border="true" style="width: 100%">
          <el-table-column label="手机号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.realName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证状态" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.clientAuth.idState == 0">未认证</el-tag>
              <el-tag type="success" v-if="scope.row.clientAuth.idState == 1">已认证</el-tag>
              <!--<el-tag type="warning" v-if="scope.row.clientAuth.idState == 2">认证失败</el-tag>-->
              <!--<el-tag type="info" v-if="scope.row.clientAuth.idState == 3">认证中</el-tag>-->
              <!--<el-tag v-if="scope.row.clientAuth.idState == 4">已过期</el-tag>-->
            </template>
          </el-table-column>
          <el-table-column label="身份证认证时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.clientAuth.idTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="个人信息状态" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.clientAuth.privateMsg == 0">未认证</el-tag>
              <el-tag type="success" v-if="scope.row.clientAuth.privateMsg == 1">已认证</el-tag>
              <!--<el-tag type="warning" v-if="scope.row.clientAuth.privateMsg == 2">认证失败</el-tag>-->
              <!--<el-tag type="primary" v-if="scope.row.clientAuth.privateMsg == 3">认证中</el-tag>-->
            </template>
          </el-table-column>
          <el-table-column label="个人信息认证时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.clientAuth.privateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="职业/学校状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.clientAuth.jobState == 0 && scope.row.clientAuth.schoolState == 1">
                <el-tag type="success">已认证</el-tag>
              </div>
              <div v-if="scope.row.clientAuth.jobState == 1 && scope.row.clientAuth.schoolState == 1">
                <el-tag type="success">已认证</el-tag>
              </div>
              <div v-if="scope.row.clientAuth.jobState == 1 && scope.row.clientAuth.schoolState == 0">
                <el-tag type="success">已认证</el-tag>
              </div>
              <div v-if="scope.row.clientAuth.schoolState == 0 && scope.row.clientAuth.jobState == 0">
                <el-tag type="danger">未认证</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="职业/学校认证时间" align="center">
            <template  slot-scope="scope">
              <span v-if="scope.row.clientAuth.schoolState == 1">{{ scope.row.clientAuth.schoolTime }}</span>
              <span v-if="scope.row.clientAuth.jobState == 1">{{ scope.row.clientAuth.jobTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          class="top"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total='total'>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
  import {post,fetch} from '@/utils/http'
  export default {
    data() {
      let validateName = (rule, value, callback) => {
        if (value === '') {
          callback();
        } else {
          callback();
        }
      };
      let validatePhone = (rule, value, callback) => {
        if (value === '') {
          callback();
        } else {
          callback()
        }
      };
      return {
        formInline: {
          name: '',
          phone: '',
          job: '',
          school: '',
          userCard: '',
          personInfo: ''
        },
        rules: {
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
          phone: [
            { validator: validatePhone, trigger: 'blur' }
          ]
        },
        certificationList: [],
        size: 10,
        currentPage: 1,
        total: 0,
      }
    },
    methods: {
      search(formInline) {
        this.$refs[formInline].validate((vaild) => {
          if(vaild) {
            // 发送请求搜索
            let para = {
              pageIndex: this.currentPage,
              pageSize: this.size
            }
            if(!this.formInline.name.replace(/\s/g, "") == '') {
              para.realName = this.formInline.name.replace(/\s/g, "")
            }
            if(!this.formInline.phone.replace(/\s/g, "") == '') {
              para.phone = this.formInline.phone.replace(/\s/g, "")
            }
            if(!this.formInline.school == '') {
              para.schoolState = this.formInline.school
            }
            if(!this.formInline.userCard == '') {
              para.idState = this.formInline.userCard
            }
            if(!this.formInline.personInfo == '') {
              para.privateMsg = this.formInline.personInfo
            }
            if(!this.formInline.job == '') {
              para.jobState = this.formInline.job
            }
            post('/api/manager/v1/clientInfo/queryClientAuth',para).then((response) => {
              response.data.data.map((val) => {
                if(val.clientAuth.idTime) {
                  val.clientAuth.idTime = this.moment(val.clientAuth.idTime).format("YYYY-MM-DD HH:mm:ss")
                }
                if(val.clientAuth.privateTime) {
                  val.clientAuth.privateTime = this.moment(val.clientAuth.privateTime).format("YYYY-MM-DD HH:mm:ss")
                }
                if(val.clientAuth.schoolTime) {
                  val.clientAuth.schoolTime = this.moment(val.clientAuth.schoolTime).format("YYYY-MM-DD HH:mm:ss")
                }
                if(val.clientAuth.jobTime) {
                  val.clientAuth.jobTime = this.moment(val.clientAuth.jobTime).format("YYYY-MM-DD HH:mm:ss")
                }
              })
              this.certificationList = response.data.data;
              this.total = response.data.totalCount;
              this.size = response.data.pageSize;
            })
          }
        })
      },
      reset(formInline) {
        this.$refs[formInline].resetFields();
      },
      handleSizeChange(val) {
        this.size = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.currentPage =val;
        this.getList();
      },
      getList() {
        // 获取数据
        post('/api/manager/v1/clientInfo/queryClientAuth',{pageIndex: this.currentPage,pageSize: this.size}).then((response) => {
          response.data.data.map((val) => {
            if(val.clientAuth.idTime) {
              val.clientAuth.idTime = this.moment(val.clientAuth.idTime).format("YYYY-MM-DD HH:mm:ss")
            }
            if(val.clientAuth.privateTime) {
              val.clientAuth.privateTime = this.moment(val.clientAuth.privateTime).format("YYYY-MM-DD HH:mm:ss")
            }
            if(val.clientAuth.schoolTime) {
              val.clientAuth.schoolTime = this.moment(val.clientAuth.schoolTime).format("YYYY-MM-DD HH:mm:ss")
            }
            if(val.clientAuth.jobTime) {
              val.clientAuth.jobTime = this.moment(val.clientAuth.jobTime).format("YYYY-MM-DD HH:mm:ss")
            }
          })
          this.certificationList = response.data.data;
          this.total = response.data.totalCount;
          this.size = response.data.pageSize;
        })
      }
    },
    mounted(){
      this.getList();
    },
  }
</script>

<style lang='scss' scoped>
  .wrap {
    /*padding: 20px;*/
    .header-wrap{
      height: 160px;
      padding: 20px;
      margin-bottom: 60px;
      background-color: #66BFBF;
      border-radius: 6px;
    }
    .top {
      margin-top: 20px;
      float: right;
    }
  }
</style>
